<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<title>分享专区</title>
	<style>
        

    </style>
</head>
<body>
	<img id="img2" src="" alt="">
<canvas id="myCanvas" width="200" height="100"></canvas>



<script type="text/javascript">
function queryParam(name) {
   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
   var r = window.location.search.substr(1).match(reg);
   if (r != null) {
     return decodeURIComponent(r[2]);
   } else {
     return null;
   }
 }
 console.log(queryParam('img_url'))
 var img = new Image();

 img.src = queryParam('img_url');
 document.querySelector('#img2').src=queryParam('img_url');
  img.setAttribute('crossOrigin','anonymous');
 img.onload=function(){
	 drawCanvas()
 }
 function drawCanvas(){
	 var myCanvas = document.querySelector('#myCanvas'); 
	 var context = myCanvas.getContext('2d'); 
	 context.drawImage(img,0,0,30,30,40,0,15,15); //剪切图像，并在画布上定位被剪切的部分
 }
 function getBase64(imgUrl) {
   window.URL = window.URL || window.webkitURL;
   var xhr = new XMLHttpRequest();
   xhr.open("get", imgUrl, true);
   // 至关重要
   xhr.responseType = "blob";
   xhr.onload = function () {
     if (this.status == 200) {
       //得到一个blob对象
       var blob = this.response;
       console.log("blob", blob)
       // 至关重要
       let oFileReader = new FileReader();
       oFileReader.onloadend = function (e) {
         // 此处拿到的已经是 base64的图片了
         let base64 = e.target.result;
         console.log("方式一》》》》》》》》》", base64)
       };
       oFileReader.readAsDataURL(blob);
       //====为了在页面显示图片，可以删除====
       var img = document.createElement("img");
       img.onload = function (e) {
         window.URL.revokeObjectURL(img.src); // 清除释放
       };
       let src = window.URL.createObjectURL(blob);
       img.src = src
       //document.getElementById("container1").appendChild(img);
       //====为了在页面显示图片，可以删除====
 
     }
   }
   xhr.send();
 }
console.log(getBase64(queryParam('img_url')))
</script>
</body>
</html>